/* eslint-disable no-param-reassign */
import React, { useCallback, useEffect, useState } from 'react'
import { Text, Textarea, View } from '@tarojs/components'
import Group from './Group'
import SurveyHeader from './SurveyHeader'
import styles from './SurveyGroup.module.scss'

const TYPE_KEY = {
  SingleChoice: {
    selectKey: 'AnswerChoice',
    dataKey: 'Choices',
  },
  MultipleChoice: {
    selectKey: 'AnswerChoices',
    dataKey: 'Choices',
  },
}
const MAX_LENGTH = 200

const SurveyGroup = ({
  data, language, isSingle, onChange, disabled, questionType, ordinal, required, isNormal, isShowTopLine
}) => {
  const { AnswerText, QuestionText, Level } = data
  const [text, setText] = useState(AnswerText || '')
  const [showInput, setShowInput] = useState(false)

  const onChangeFunc = useCallback(item => {
    const { AllowEnterText, Label } = item
    const { AllowEnterTextLabel } = data
    if (AllowEnterText && !showInput) {
      data.AllowEnterTextLabel = Label
      setShowInput(true)
    } else if (isSingle || !isSingle && AllowEnterTextLabel === Label) {
      data.AllowEnterTextLabel = null
      data.AnswerText = ''
      showInput && setShowInput(false)
    }
    if (isSingle) {
      const selected = data?.[selectKey] === Label
      const newItem = { ...data, [selectKey]: selected ? '' : Label }
      onChange?.(newItem)
      return
    }
    const index = selectData.indexOf(item.Label)
    if (index > -1) {
      selectData.splice(index, 1)
    } else {
      selectData.push(item.Label)
    }
    const newItem = { ...data, [selectKey]: selectData }
    onChange?.(newItem)
  }, [data, isSingle, onChange, selectKey, selectData, showInput])

  const onChangeText = useCallback(e => {
    const val = e.detail.value
    onChange({ ...data, AnswerText: val })
    setText(val)
  }, [data, onChange])

  useEffect(() => {
    if (!AnswerText) return
    setText(AnswerText)
    setShowInput(!!AnswerText)
  }, [AnswerText, setText])

  const key = TYPE_KEY[data.AnswerType]
  if (!key) return null
  const { selectKey, dataKey } = key
  const datas = data[dataKey]
  const selectData = data[selectKey]
  const groupStyle = Level > 1 ? ` ${styles.subGroup}` : ''
  return (
    <View>
      <SurveyHeader
        level={Level}
        questionType={questionType}
        label={QuestionText?.[language]}
        ordinal={ordinal}
        required={required}
        isShowTopLine={isShowTopLine}
      />
      <Group
        style={`${styles.group} ${groupStyle}`}
        datas={datas}
        disabled={disabled}
        selectData={selectData}
        columns={1}
        onChange={onChangeFunc}
        isSingle={isSingle}
        isNormal={isNormal}
        language={language}
      />
      {showInput && (
      <View className={styles.inputContainer}>
        {disabled
          ? (
            <Text className={`${styles.input} ${styles.disabled}`}>
              {text || '未填写'}
            </Text>
          ) : (
            <Textarea
              maxlength={MAX_LENGTH}
              placeholder="请输入，最多200字"
              placeholderClass={styles.placeholderText}
              className={styles.input}
              value={text}
              onInput={onChangeText}
            />
          )}
      </View>
      )}
    </View>
  )
}

export default SurveyGroup
